import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchAddressList } from '../actions/addressList';
import { List } from 'antd-mobile';

const Item = List.Item;
const Brief = Item.Brief;
const mapStateToProps = state => {
  return {
    addressList: state.addressList
  };
};
class Friend extends Component {
  componentDidMount() {
    this.props.fetchAddressList();
  }
  render() {
    const { addressList } = this.props;
    return (
      <div>
        <List renderHeader={() => '通讯录'} className="my-list">
          {addressList.length > 0
            ? addressList.map(val => (
                <Item
                  key={val.id}
                  arrow="empty"
                  thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
                  multipleLine
                  onClick={() => {}}
                >
                  {val.name} <Brief>{val.phone.number}</Brief>
                </Item>
              ))
            : '暂无数据'}
        </List>
      </div>
    );
  }
}
export default connect(
  mapStateToProps,
  { fetchAddressList }
)(Friend);
